<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" itemscope itemtype="http://106.54.88.140:81/bausCe.html?trackSharing=1">

<head>
    <link rel="stylesheet" type="text/css" href="./css/build/pages/dsocial/template_normal.min.css" />
    <script type="text/javascript">
        /*<![CDATA[*/
        YII_CSRF_TOKEN = '24b538ef90cc607c105e8513de66e7517a81f45c';
        /*]]>*/
    </script>
    <title>Social Media Page</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="shortcut icon" href="/img/favicon/favicon.ico" type="image/x-icon" />
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

    <!--Facebook meta-->
    <meta property="og:url" content="http://106.54.88.140:81/bausCe.html?trackSharing=1" />
    <meta property="og:title" content="Connect with Heystop!" />
    <meta property="og:description"
        content="Follow us and get updates delivered to your favorite social media channel." />
    <meta property="og:image" content="http:" />
    <meta property="og:image:width" content="200" />
    <meta property="og:image:height" content="200" />

    <!-- Twitter Card data -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:url" content="http://106.54.88.140:81/bausCe.html?trackSharing=1">
    <meta name="twitter:title" content="Connect with Heystop!">
    <meta name="twitter:description"
        content="Follow us and get updates delivered to your favorite social media channel.">
    <meta name="twitter:image" content="http:">
    <meta name="twitter:image:width" content="200">
    <meta name="twitter:image:height" content="200">

    <!-- Schema.org markup for Google+ -->
    <meta itemprop="name" content="Connect with Heystop!">
    <meta itemprop="description" content="Follow us and get updates delivered to your favorite social media channel.">
    <meta itemprop="image" content="http:">
    <style>
        ul.ssk-block>li>a {
            padding-left: 0 !important;
        }

        ul.ssk-block>li img {
            width: 33px;
            height: 33px;
            display: inline-block;
            margin-right: 38px;
        }
        ul.ssk-block>li:last-child >input{
            float: none;
            margin-left: 0;
        }
    </style>
</head>

<body ng-app="app" id="dsocial-body" ng-controller="ComplexController"
    class="{{isColorLight(view.code.color1) ? 'darkTheme' : 'whiteTheme'}}">

    <div class="loading-welcome active welcome-screen"
        ng-style="{'background-color': view.code.welcome_extra.background || view.welcome_extra.background}"
        style="background-color: #ffffff">
        <div class="progress">
            <div class="loading-bar indeterminate" ng-style="{'background-color': view.code.color1 || view.color1}">
            </div>
        </div>
        <div class="helper"></div>
        <img id="welcomeImg" imageonload
            ng-src="{{view.welcome_screen || '//s3.eu-central-1.amazonaws.com/qrcgappcdn/social-media-solution/welcome.png'}}"
            ng-style="{
            'max-width': view.code.welcome_extra.zoom *2 || view.welcome_extra.zoom *2 + 'px',
            'max-height': view.code.welcome_extra.zoom *2 || view.welcome_extra.zoom *2 + 'px',
            'animation-iteration-count' :  view.showPreview == 'infinite' ? 'infinite' : '',
            'animation-direction' :  view.showPreview == 'infinite' ? 'alternate' : ''
            }">
    </div>

    <div class="vcard-template style2" id="rootElement">
        <div ng-if="!view.code.avatar && !view.code.customHeaderImage">
            <div class="solid-bgd" ng-style="setSolidBgd()">
            </div>
        </div>
        <div ng-if="view.code.avatar || view.code.customHeaderImage">
            <div class="blur-bgd hidden-sm hidden-xs"
                ng-style="{'background': view.code.avatar.length > 0 || view.code.customHeaderImage !=undefined ? 'url(' + (view.code.avatar.length > 0 ? view.code.avatar : view.code.customHeaderImage.url) +')' : 'none'}"
                ng-class="{'blur-no-avatar':!view.code.avatar && !view.code.customHeaderImage}">
            </div>
        </div>
        <div class="bgd-shadow"></div>
        <!--    <pre>avatar_extra: {{view.code.avatar_extra | json}}</pre>-->
        <!--    <pre>welcome_extra: {{view.code.welcome_extra | json}}</pre>-->
        <div class="page-home page">
            <div class="vcard-header">
                <div class="vcard-header-wrapper">
                    <div class="vcard-top-info avatar-container" ng-style="setAvatarExtra()">
                    </div>
                    <div class="event-section-title"
                        ng-class="{'shadow-2': !view.code.avatar || !view.code.customHeaderImage}"
                        ng-style="getBackgroundColor();">
                        <div class="event-content-container">
                            <div class="event-title dynamicTextColor">{{view.code.title}}</div>
                            <div class="event-teaser mt-10 dynamicTextColor"
                                ng-show="view.code.teaser && (view.code.avatar || view.code.customHeaderImage)">
                                {{view.code.teaser}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="event-body">
                <div class="vcard-body-wrapper">
                    <div class="vcard-body">
                        <div id="devent-details">
                            <div class="channel-container event-teaser"
                                ng-if="view.code.avatar == '' && !view.code.customHeaderImage && view.code.teaser">
                                <span class="table-cell-middle">{{view.code.teaser}}</span>
                            </div>
                            <a ng-href="{{getChannelLink(channel)}}" target="{{!loadDemo ? '_blank' : '_self'}}"
                                class="channel-container" id="channel-item-{{channel.name}}"
                                ng-click="loadDemo ? callAction($event,'channelAction') : ''"
                                ng-repeat="channel in view.code.channels track by $index">
                                <div class="table-cell-middle1 pl-55 pos-relative">
                                    <div class="channel-bgd-{{channel.name | toIconName}}"
                                        ng-style="{top: channel.label ? 'calc(50% - 20px)' : 'calc(50% - 15px)'}">
                                        <!-- <i ng-if="channel.name != 'Snapchat'"
                                            class="icon-social-{{channel.name | toIconName}}"></i> -->
                                        <img src="./svg/{{channel.name}}.svg" alt="" width="100%" height="100%">
                                        <!-- <svg ng-if="channel.name == 'Snapchat'" version="1.1" id="Ebene_1"
                                            xmlns="http://www.w3.org/2000/svg"
                                            xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px"
                                            height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40"
                                            xml:space="preserve">
                                            <g>
                                                <path stroke-linejoin="round" stroke="black" stroke-width="1" d="M29.8,25.6c-2.9-0.5-4.2-3.5-4.2-3.6c0,0,0,0,0,0c-0.2-0.4-0.2-0.7-0.1-0.9c0.2-0.5,0.8-0.7,1.3-0.8c0.1,0,0.2-0.1,0.3-0.1
		c0.7-0.3,0.9-0.6,0.9-0.8c0-0.2-0.2-0.4-0.5-0.5l0,0c-0.1,0-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1c-0.4,0.2-0.7,0.3-1,0.3h0
		c-0.4,0-0.5-0.2-0.6-0.2c0-0.2,0-0.4,0-0.6l0-0.1c0.1-1.4,0.2-3.1-0.2-4.1c-1.3-2.9-4-3.2-4.9-3.2l0,0c0,0-0.3,0-0.4,0
		c-0.8,0-3.6,0.2-4.9,3.2c-0.4,1-0.3,2.7-0.2,4.1c0,0.2,0,0.4,0,0.6c0,0-0.2,0.2-0.6,0.2c-0.3,0-0.6-0.1-1-0.3c-0.1,0-0.1,0-0.2,0
		c-0.3,0-0.7,0.2-0.8,0.5c0,0.2,0,0.5,0.9,0.9c0.1,0,0.2,0.1,0.3,0.1c0.4,0.1,1.1,0.3,1.3,0.8c0.1,0.3,0.1,0.6-0.1,0.9c0,0,0,0,0,0
		c-0.1,0.1-1.3,3.1-4.2,3.6c-0.1,0-0.2,0.1-0.2,0.2c0,0,0,0.1,0,0.1c0.1,0.3,0.7,0.7,2.5,1c0.2,0,0.2,0.3,0.3,0.7
		c0,0.2,0.1,0.3,0.1,0.5c0.1,0.2,0.2,0.2,0.3,0.2c0.1,0,0.3,0,0.4-0.1c0.3-0.1,0.7-0.1,1.1-0.1c0.3,0,0.5,0,0.8,0.1
		c0.6,0.1,1,0.4,1.6,0.8c0.7,0.5,1.5,1.1,2.7,1.1c0,0,0.1,0,0.1,0h0c0.1,0,0.1,0,0.2,0c1.2,0,1.9-0.5,2.7-1.1c0.5-0.4,1-0.7,1.5-0.8
		c0.3,0,0.6-0.1,0.8-0.1c0.5,0,0.8,0.1,1.1,0.1c0.2,0,0.3,0.1,0.4,0.1h0c0.1,0,0.2-0.1,0.3-0.2c0-0.2,0.1-0.3,0.1-0.5
		c0.1-0.4,0.2-0.6,0.3-0.7c1.9-0.3,2.4-0.7,2.5-1c0,0,0-0.1,0-0.1C30,25.7,29.9,25.6,29.8,25.6z" fill="white"></path>
                                            </g>
                                        </svg> -->
                                    </div>
                                    <div class="channel-prop-container"
                                        ng-class="{'pull-left': channel.link && channel.label && channel.name == 'Website', 'pull-left mt-101 height-301': channel.link && !channel.label && channel.name == 'Website', 'pt-10': !channel.label}">

                                        <span ng-if="channel.name == 'Website'">
                                            <span ng-if="channel.label">
                                                <div class="channel-name" ng-class="{'mb-5': channel.label}">
                                                    {{channel.label}}
                                                </div>
                                                <div class="channel-label">
                                                    {{getChannelNameOrLink(channel)}}
                                                </div>
                                            </span>
                                            <span ng-if="!channel.label">
                                                <div class="channel-name" ng-class="{'mb-5': channel.label}">
                                                    {{getChannelNameOrLink(channel)}}
                                                </div>
                                                <div class="channel-label">
                                                    {{channel.label}}
                                                </div>
                                            </span>
                                        </span>
                                        <span ng-if="channel.name != 'Website'">
                                            <div class="channel-name" ng-class="{'mb-5': channel.label}">
                                                {{getChannelNameOrLink(channel)}}
                                            </div>
                                            <div class="channel-label">
                                                {{channel.label}}
                                            </div>
                                        </span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="vcard-row follow-scroll share-container" ng-show="view.sharing">
                            <div class="fabs" id="shareFab">
                                <div class="fixed-blur-bgd">
                                    <div class="chat">
                                        <div class="fab-body">
                                            <div class="icon-fab-close"></div>
                                            <div class="fab-header"
                                                ng-style="{color: isColorLight(view.code.color2) ? 'black' : view.code.color2}">
                                                Share page</div>
                                            <ul class="ssk-block ssk-md"
                                                data-url="http://106.54.88.140:81/bausCe.html?trackSharing=1" data-text="">
                                                <li>
                                                    <!-- <i class="icon-fab-share-facebook"></i> -->
                                                    <a href="" class="ssk ssk-text ssk-facebook"><img
                                                            src="./svg/Facebook.svg">Fackbook</a>
                                                </li>
                                                <li>
                                                    <a href="" class="ssk ssk-text ssk-twitter"><img
                                                            src="./svg/Twitter.svg">Twitter</a>
                                                </li>
                                                <li>
                                                    <a href="" class="ssk ssk-text ssk-google-plus"><img
                                                            src="./svg/Google+.svg">Google+</a>
                                                </li>
                                                <li>
                                                    <a href="whatsapp://send?text=http://106.54.88.140:81/bausCe.html?trackSharing=1"
                                                        class="ssk ssk-whatsapp"><img
                                                            src="./svg/Whatsapp.svg">Whatsapp+</a>
                                                </li>
                                                <li>
                                                    <a href="mailto:?body=http://106.54.88.140:81/bausCe.html?trackSharing=1"
                                                        target="_blank"><img src="./svg/Email.svg">Email</a>
                                                </li>
                                                <li>
                                                    <img src="./svg/Message.svg">
                                                    <input id="shortUrl" value="http://106.54.88.140:81/bausCe.html" readonly="">
                                                    <button id="copyButton">Copy</button>
                                                    <div class="ifCopySucceed ng-hide" ng-show="ifCopySucceed">
                                                        Text copied to the clipboard.                        </div>
                                                </li>
                                            </ul>
                                        </div>

                                    </div>
                                </div>
                                <a id="{{!loadDemo ? 'prime' : ''}}" class="fab"
                                    ng-style="{background: view.code.color2 || '#ea4b88'}"
                                    ng-click="!loadDemo ?  '' : callAction($event,'shareAction')">
                                    <span class="hidden-xs"
                                        ng-style="{'color': isColorLight(view.code.color2) ? 'black' : 'white'}">
                                        <i class="prime icon icon-fab-share"></i>
                                        Share this page </span>
                                    <i class="prime icon icon-fab-share visible-xs"
                                        ng-style="{'color': isColorLight(view.code.color2) ? 'black' : 'white'}"></i>
                                </a>
                            </div>
                        </div>


                        <div id="redirectTo">
                            <div class="fixed-blur-bgd">
                                <div class="dialog-container">
                                    <div class="fab-body">
                                        <div class="event-title">
                                            Continue? </div>
                                        <div class="dialog-body">
                                            You will be directed to another website. </div>
                                        <a class="event-slim-button ripplelink mt-10 pull-right"
                                            ng-style="{'color': isColorLight(view.color2) ? 'black' : view.color2}"
                                            ng-click="dialogRedirectCallback(false)">
                                            No </a>
                                        <a class="event-slim-button ripplelink mt-10 pull-right"
                                            ng-style="{'color': isColorLight(view.color2) ? 'black' : view.color2}"
                                            ng-click="dialogRedirectCallback(true)">
                                            Yes </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="gotIt">
                            <div class="fixed-blur-bgd">
                                <div class="dialog-container">
                                    <div class="fab-body">
                                        <div class="event-gotIt-button">
                                        </div>
                                        <div class="dialog-body pull-left">
                                            {{gotItText}}
                                        </div>
                                        <a class="text-regular-blue mt-20" ng-click="closeDialog()">
                                            Got it </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="eventOver">
                            <div class="fixed-blur-bgd">
                                <div class="dialog-container">
                                    <div class="fab-body">
                                        <div class="event-title">
                                            Event has passed </div>
                                        <div class="dialog-body">
                                            Registration and ticket purchases have closed for this event. </div>
                                        <a class="event-slim-button ripplelink mt-10 pull-right"
                                            ng-style="{'color': isColorLight(view.color2) ? 'black' : view.color2}"
                                            ng-click="dialogRedirectCallback(true)">
                                            Close </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/angular.js"></script>
    <script type="text/javascript">
        /*<![CDATA[*/


        /**
         * Angular connection
         */
        app.loadBasePreviewController();


        /**
         * Replace a point with a space character
         */
        app.filter('point2space', function () {
            return function (input) {
                if (input) {
                    return input.replace(/\./g, ' ');
                }
            }
        });

        /**
         * Return date in number format '1490189463876'
         *
         * @param input - date
         * */
        app.filter('toDay', function () {
            return function (input) {
                if (input) {
                    var result = new Date(input).getTime();
                    return result || '';
                } else
                    return '';
            };
        });

        /**
         * Return value with '-' instead of spaces
         *
         * @param input - string
         * */
        app.filter('dashEncode', function () {
            return function (input) {
                if (input) {
                    return input.replace(/ /g, "-");
                } else
                    return ' ';
            };
        });

        /**
         * Return escape value of param
         *
         * @param input - string
         * */
        app.filter('escape', function () {
            return function (input) {
                if (input) {
                    return escape(input);
                } else
                    return ' ';
            };
        });

        /**
         * Return icon name based on the channel name
         * */
        app.filter('toIconName', function () {
            return function (input) {
                if (input) {
                    return input.replace(/\s+/g, '').toLowerCase();
                } else
                    return ' ';
            };
        });

        /**
         * Return link with the correct prefix
         * */
        app.filter('prefixChannel', ['$filter', function ($filter) {
            return function (input, name) {
                if (input) {
                    switch (name) {
                        case ('Twitter'):
                            return $filter('prefixURL')('www.twitter.com/' + input);
                            break;
                        case ('Instagram'):
                            return $filter('prefixURL')('www.instagram.com/' + input);
                            break;
                        case ('Snapchat'):
                            return $filter('prefixURL')('www.snapchat.com/add/' + input);
                            break;
                        case ('WeChat'):
                            return 'weixin://dl/chat?' + input;
                            break;
                        case ('Skype'):
                            return 'skype:' + input + '?add';
                            break;
                        case ('Line'):
                            return $filter('prefixURL')('http://line.naver.jp/ti/p/@' + input);
                            break;
                        default:
                            return $filter('prefixURL')(input);
                            break;
                    }
                } else
                    return ' ';
            };
        }]);

        /**
         * Return domain of input
         * */
        app.filter('domain', function () {
            return function (input) {
                if (input.indexOf('://') >= 0) {
                    return input.split('/')[2]
                }
                return input.split('/')[0]
            };
        });

        /**
         * The QR service for the app.
         * */
        app.service('qr', function () {
            /**
             * Scroll page from buttom to top
             * */
            this.scrollFromBottomtoTop = function (loadDemo) {
                setTimeout(function () {
                    if (loadDemo == true) {
                        $("html, body").animate({
                            scrollTop: $('.channel-container:last-child').offset().top
                        }, 0);
                        $("html, body").animate({
                            scrollTop: 0
                        }, 1000);
                    }
                }, 0)
            }
        });

        /**
         * Directive
         *
         * When image is loaded fadeout welcome screen
         * */
        app.directive('imageonload', ['qr', function (qr) {
            return {
                restrict: 'A',
                link: function (scope, element, attrs) {
                    element.bind('load', function () {
                        $("#welcomeImg").fadeIn(1000);
                        window.setTimeout(function () {
                            $(".loading-welcome.welcome-screen").fadeOut();
                            scope.welcomeScreenScrollWindow++;
                            if (scope.welcomeScreenScrollWindow == 1) {
                                qr.scrollFromBottomtoTop(scope.loadDemo)
                            }
                        }, 2000);
                    });
                    element.bind('error', function () {});
                }
            };
        }]);
        //Override the base preview controller
        app.controller('ComplexController', function ($scope, $controller, $sce, $rootScope, $filter, previewService,
            $window) {

            $scope.welcomeScreenScrollWindow = 0;
            /**
             * Get channel name from channel item
             *
             * @param channel
             * */
            $scope.getChannelLink = function (channel) {
                if (!$scope.loadDemo) {
                    return $filter('prefixChannel')(channel.link, channel.name);
                }
                return '#channel-item-' + channel.name;
            };

            /**
             * Get channel name or link to the channel based on channel info
             *
             * @param channel
             * */
            $scope.getChannelNameOrLink = function (channel) {
                if (channel.name == 'Website')
                    if (channel.link) {
                        return $scope.loadDemo ? channel.link : $filter('domain')(channel.link);
                    } else {
                        return channel.name;
                    }
                else {
                    return channel.name;
                }
            };

            /**
             * Set solid background for the header based on the title section height
             * */
            $scope.setSolidBgd = function () {
                if ($scope.view.code) {
                    var titleSectionHeight = 142;
                    setTimeout(function () {
                        if ($scope.view.code.teaser) {
                            titleSectionHeight = $('.event-content-container').parent()
                                .outerHeight() + 60 + 128
                        } else
                            titleSectionHeight = $('.event-content-container').parent()
                            .outerHeight() + 60;
                        $('.solid-bgd').css({
                            'background-color': $scope.view.code.color1 ? $scope.view.code
                                .color1 : '#447fb6',
                            'height': !$scope.view.code.avatar ? titleSectionHeight + 'px' :
                                '420px'
                        })
                    }, 0);
                }
            };

            /**
             * Open the dialog popup
             * Event is for getting the current target element
             * Target:
             *      - shareAction: Button with got it information
             *      - channelAction: Button with got it information
             *
             * @param event - string
             * @param target - string
             * */
            $scope.callAction = function (event, target) {
                switch (target) {
                    case 'shareAction':
                        if ($scope.loadDemo) {
                            $scope.gotItText = 'Your contacts can click this button to share your page.';
                            $scope.toggleDialog('gotIt', $(event.currentTarget));
                        }
                        break;
                    case 'channelAction':
                        if ($scope.loadDemo) {
                            $scope.gotItText =
                                'By tapping here, users are navigated to the linked social media profile or website.';
                            $scope.toggleDialog('gotIt', $(event.currentTarget));
                        }
                        break;
                }
            };


            /**
             * Toggle dialog
             *
             * @param id - string
             * @param element - current target
             * */
            $scope.toggleDialog = function (id, element) {
                if (element) {
                    var elem = element.context.outerHTML;
                    $('#' + id + ' .dialog-container .event-gotIt-button').html(elem);
                }
                $($('#' + id).parent()).toggleClass('fabOnTop');
                $('#' + id + ' .dialog-container').toggleClass('is-visible');
                $('#prime.fab').toggleClass('disabledClick');
                $('#' + id + ' .fixed-blur-bgd').toggle();
            };

            /**
             * Callback of the dialog yes/no buttons
             * Can close the dialog or it can redirect to a url and close the dialog
             * If the url is not defined it will use the targetUrl from the callAction button
             *
             * @param proceed - string
             * @param url - current target
             * */
            $scope.dialogRedirectCallback = function (proceed, url) {
                if (proceed) {
                    if (url) {
                        $window.open(url, '_blank');
                    } else {
                        if ($scope.view.code.callToAction.targetUrl.indexOf('http') < 0)
                            $window.open('//' + $scope.view.code.callToAction.targetUrl, '_blank');
                        else
                            $window.open($scope.view.code.callToAction.targetUrl, '_blank');
                    }
                    $scope.closeDialog();
                } else {
                    $scope.closeDialog();
                }
            };

            /**
             * Close dialog
             *
             * */
            $scope.closeDialog = function () {
                $('.dialog-container').removeClass('is-visible');
                $('#prime.fab').toggleClass('disabledClick');
                $('.event-gotIt-button').html('');
                $('.fixed-blur-bgd').hide();
            };


            /**
             * Set position of the fab Button
             *If we have only one fab you have to use bottom 5px!!! else use 75px as default
             * @param buttonName - string
             * */
            $scope.setPosition = function (buttonName) {
                if ($(window).innerWidth() < 667) {
                    var bottom = '5px',
                        right = '17px';
                    if (buttonName == 'calendar')
                        bottom = '5px';
                    if ($(window).innerWidth() < 321)
                        right = '-85px';
                    return {
                        'position': 'fixed',
                        'bottom': bottom,
                        'right': right,
                        'width': '80px'
                    }
                }
                return '';
            };

            //Inherrit from basePreviewController
            angular.extend(this, $controller('BasePreviewController', {
                $scope: $scope
            }));

            $scope.loadDemo = parent && typeof parent.ImHere === "function";

            //Get the json data form the file
            json_data = {
                "form": [{
                    "section_design": {
                        "fold": false
                    }
                }, {
                    "section_basic_info": {
                        "fold": false
                    }
                }, {
                    "section_media_channels": {
                        "fold": false
                    }
                }, {
                    "section_welcome_screen": {
                        "fold": false
                    }
                }, {
                    "section_advance_options": {
                        "fold": true
                    }
                }],
                "code": {
                    "title": "Connect with Heystop!",
                    "teaser": "Follow us and get updates delivered to your favorite social media channel.",
                    "channels": [{
                        "input_prefix_label": "URL",
                        "link": "https:\/\/www.amazon.com\/s?me=A3NOBQB2OXMVUZ&marketplaceID=ATVPDKIKX0DER",
                        "label": "Check us out on Amazon!",
                        "name": "Website"
                    }, {
                        "input_prefix_label": "URL",
                        "label": "Become a fan of Heystop on Facebook!",
                        "name": "Facebook",
                        "link": "https:\/\/www.facebook.com\/Aisitin-110924247249893"
                    }, {
                        "input_prefix_label": "URL",
                        "label": "Watch our videos!",
                        "name": "YouTube",
                        "link": "https:\/\/www.youtube.com\/channel\/UClrnnRKl4Y4qjWF5MBrnD_g\/videos"
                    }, {
                        "input_prefix_label": "@",
                        "link": "TopHeys",
                        "label": "Follow us on Twitter!",
                        "name": "Twitter"
                    }, {
                        "input_prefix_label": "@",
                        "link": "Heystop.official",
                        "label": "Follow us on Instagram!",
                        "name": "Instagram"
                    }],
                    "color1": "#447fb6",
                    "color2": "#e91e63",
                    "avatar": "",
                    "avatar_extra": {
                        "zoom": 100,
                        "background": "#ffffff"
                    },
                    "welcome_extra": {
                        "zoom": 50,
                        "background": "#ffffff"
                    },
                    "customHeaderImage": {
                        "url": "\/\/s3.eu-central-1.amazonaws.com\/qrcgappcdn\/social-media-solution\/Header_SocialMedia_1.svg",
                        "color": "#3766b8"
                    }
                },
                "showPreview": 4,
                "welcome_screen": "\/\/i.loli.net\/2020\/04\/06\/hI4iGLM7KeC8wzD.png?0.18580039377363566",
                "sharing": true
            };

            //Upgrade old vcards created before 13.04 with show_directions parameter
            if (angular.isUndefined(json_data.show_directions))
                json_data.show_directions = true;

            previewService.pushData(json_data);

            function setAvatarBackgroundImage() {
                if ($scope.view.code) {
                    if ($scope.view.code.avatar)
                        return {
                            'background': 'url(' + $scope.view.code.avatar + ')'
                        };
                    else return {
                        'height': '0px',
                        'background': 'none'
                    }
                }
            }

            function getBackgroundColor() {
                if ($scope.view.code) {
                    var color1 = $scope.view.code.color1 || '#607d8b';
                    if (!$scope.view.code.show_gradient)
                        return {
                            "background": color1
                        };
                }
            }

            $scope.getBackgroundColor = getBackgroundColor;
            $scope.setAvatarBackgroundImage = setAvatarBackgroundImage;

            window.setTimeout(function () {

                $(".loading-vcard").fadeOut();
                $(".vcard-functions-wrapper a:visible:last").addClass("last-element");
            }, 500);

            /**
             * Copy short ulr to clipboard
             *
             * @param elem - input element with the link
             * */
            $scope.ifCopySucceed = false;
            $scope.copyLinkToClipboard = function (elem) {
                var targetId = "_hiddenCopyText_";
                var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
                var origSelectionStart, origSelectionEnd;
                if (isInput) {
                    // can just use the original source element for the selection and copy
                    target = elem;
                    origSelectionStart = elem.selectionStart;
                    origSelectionEnd = elem.selectionEnd;
                } else {
                    // must use a temporary form element for the selection and copy
                    target = document.getElementById(targetId);
                    if (!target) {
                        var target = document.createElement("textarea");
                        target.style.position = "absolute";
                        target.style.left = "-9999px";
                        target.style.top = "0";
                        target.id = targetId;
                        document.body.appendChild(target);
                    }
                    target.textContent = elem.textContent;
                }
                // select the content
                var currentFocus = document.activeElement;
                target.focus();
                target.setSelectionRange(0, target.value.length);

                // copy the selection
                var succeed;
                try {
                    succeed = document.execCommand("copy");
                } catch (e) {
                    succeed = false;
                }
                // restore original focus
                if (currentFocus && typeof currentFocus.focus === "function") {
                    currentFocus.focus();
                }

                if (isInput) {
                    // restore prior selection
                    elem.setSelectionRange(origSelectionStart, origSelectionEnd);
                } else {
                    // clear temporary content
                    target.textContent = "";
                }
                $scope.$apply(function () {
                    $scope.ifCopySucceed = succeed;
                });
                setTimeout(function () {
                    $scope.$apply(function () {
                        $scope.ifCopySucceed = false;
                    });
                }, 1500)
            };

            /**
             * Set text color based on the background
             *
             * @param color - background color
             * */
            $scope.isColorLight = function (color) {
                var c;
                if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(color)) {
                    c = color.substring(1).split('');
                    if (c.length == 3) {
                        c = [c[0], c[0], c[1], c[1], c[2], c[2]];
                    }
                    c = '0x' + c.join('');

                    var r = (c >> 16) & 255,
                        g = (c >> 8) & 255,
                        b = c & 255;
                    // Counting the perceptive luminance
                    // human eye favors green color...
                    var a = 1 - (0.240 * r + 0.470 * g + 0.150 * b) / 255;
                    return (a < 0.4);
                }
            };
            /**
             * Watch showPreview value
             *
             * @param p1 - new value
             * @param p2 - old value
             * */
            $scope.$watch("view.showPreview", function (p1, p2, p3) {
                if (p1 != undefined && p1 == 'infinite') {
                    setTimeout(function () {
                        $(".loading-welcome.welcome-screen").show();
                        $("#welcomeImg").fadeIn(1000);
                    }, 500)
                } else if (p1 == undefined && p2 != undefined && p2 == 'infinite') {
                    $("#welcomeImg").hide();
                    $(".loading-welcome").fadeOut();
                } else if ((p1 != undefined && p2 != undefined && p1 != p2) || (p1 != undefined && p1 !=
                        0 && p2 == undefined && p1 != p2)) {
                    setTimeout(function () {
                        $(".loading-welcome.welcome-screen").show();
                        $("#welcomeImg").hide();
                        $("#welcomeImg").fadeIn(1000);
                        setTimeout(function () {
                            $(".loading-welcome").fadeOut();
                        }, 2000)
                    }, 500)
                }
            });

            $scope.setAvatar = function () {
                return {
                    'background': $scope.view.code.avatar ? 'url(' + $scope.view.code.avatar + ')' : 'none'
                }
            };

            /**
             * Set avatar background with extra options like zoom and background color
             * */
            $scope.setAvatarExtra = function () {
                var style = {};
                if ($scope.view.code) {
                    /*
                     * Apply custom header image and background color
                     * */
                    if ($scope.view.code.customHeaderImage && $scope.view.code.customHeaderImage.url) {
                        if ($scope.view.code.customHeaderImage.color != null) {
                            style = {
                                'background-color': $scope.view.code.customHeaderImage.color,
                                '-webkit-mask': 'url("' + $scope.view.code.customHeaderImage.url +
                                    '") no-repeat 50% 50%',
                                'mask': 'url("' + $scope.view.code.customHeaderImage.url +
                                    '") no-repeat 50% 50%',
                                '-webkit-mask-size': 'cover',
                                'mask-size': 'cover'
                            };
                            $('.vcard-top-info.avatar-container').css('background-color', $scope.view.code
                                .customHeaderImage.color);
                        } else
                            style = {
                                'background-image': 'url("' + $scope.view.code.customHeaderImage.url + '")',
                                'background-size': '100%'
                            }
                    } else if ($scope.view.code.avatar)
                        style = {
                            'background': 'url("' + $scope.view.code.avatar + '")',
                            'background-size': '100%!important',
                            'background-color': '#ffffff'
                        };
                    else
                        style = {
                            'height': '0px',
                            'background': 'none'
                        };
                    if ($scope.view.code.avatar_extra) {
                        style['background-size'] = $scope.view.code.avatar_extra.zoom + '%';
                        if (!($scope.view.code.customHeaderImage && $scope.view.code.customHeaderImage
                                .url && $scope.view.code.customHeaderImage.color != null)) {
                            style['background-color'] = $scope.view.code.avatar_extra.background;
                        }
                    }
                }
                // Convert array to string to avoid problems with vendor prefixes.
                var string_style = '';
                angular.forEach(style, function (value, key) {
                    string_style += key + ': ' + value + ';';
                });
                // Bad solution, but works (Alex).
                $('.vcard-top-info.avatar-container').attr('style', string_style);
                return {};
            };

            /**
             * Watch avatarExtra values and set the css
             * */
            $scope.$watch('view.code.avatar_extra', function (newVal) {
                if (newVal) {
                    $('.avatar-container').css({
                        'background-size': newVal.zoom + '%!important',
                        'background-color': newVal.background,
                        'background-position': 'center center'
                    });
                }
            });

            $(document).ready(function () {
                /**
                 * To work, function 'copyLinkToClipboard' needs to be called from an event listener on the copy button
                 * */
                document.getElementById("copyButton").addEventListener("click", function () {
                    $scope.copyLinkToClipboard(document.getElementById("shortUrl"));
                });
            })

        });

        if (parent && typeof parent.ImHere === "function") {
            parent.ImHere();
        } else {
            //Only load this on standalone pages not inframe working
            SocialShareKit.init();
        }

        /**
         * Toggle fab
         *
         * @param id - id of the fab
         */
        function toggleFab(id) {

            $(id + ' .prime').toggleClass('is-active');
            $(id + ' #prime').toggleClass('is-float');
            $($(id).parent()).toggleClass('fabOnTop');
            $('#prime.fab').toggleClass('disabledClick');
            $(id + ' .fixed-blur-bgd').toggle();
            $(id + ' .chat').toggleClass('is-visible');

        }

        $(document).ready(function () {

            /**
             * On window resize if width is bigger then tablet remove calendar and share mobile style
             * */
            $(window).resize(function () {
                if (window.innerWidth >= 667) {
                    $('.follow-scroll.calendar-container').removeAttr('style');
                    $('.follow-scroll.share-container').removeAttr('style');
                }
            });

            /**
             * Close fab from close icon
             * */
            $('#prime, .icon-fab-close').click(function () {
                var id = $($(this).closest('.fabs')).attr('id');
                toggleFab('#' + id);
            });

            /**
             * Close fab on blur bgd click
             * */
            $('.fixed-blur-bgd').click(function () {
                if (event.target == $(this)[0]) {
                    $($("#prime.is-float").parent().parent()).removeClass('fabOnTop');
                    $('.prime').removeClass('is-active');
                    $('#prime').removeClass('is-float');
                    $('#prime.fab').removeClass('disabledClick');
                    $('.chat, .dialog-container').removeClass('is-visible');
                    $(this).hide();
                }
            });


            /**
             * Ripple effect on element
             */
            var ink, d, x, y;
            $(".ripplelink").click(function (e) {
                if ($(this).find(".ink").length === 0) {
                    $(this).prepend("<span class='ink'></span>");
                }

                ink = $(this).find(".ink");
                ink.removeClass("animate");

                if (!ink.height() && !ink.width()) {
                    d = Math.max($(this).outerWidth(), $(this).outerHeight());
                    ink.css({
                        height: d,
                        width: d
                    });
                }

                x = e.pageX - $(this).offset().left - ink.width() / 2;
                y = e.pageY - $(this).offset().top - ink.height() / 2;

                ink.css({
                    top: y + 'px',
                    left: x + 'px'
                }).addClass("animate");
            });
        });

        /*]]>*/
    </script>
</body>

</body>

</html>